<template>
  <div>
    <div class="index_top_bg1">
      <!-- <img class="index_top_bg_text index_top_text" src="./../../assets/index_top_bg_text.png" alt=""> -->
      <van-image width="100%" lazy-load  class="index_top_bg" :src="require('./../../assets/index_top_bg.png')" alt="" />
    </div>
    <div>
      <div class="top_nav">
        <div class="top_nav__inner">
          <div :class="[index == 1 ? 'on' : '']">
          <a @click="setIndex(1, '/')" to="/">活动介绍</a>
        </div>
         <div :class="[index == 3 ? 'on' : '']">
          <a @click="setIndex(3, 'three')" to="/three">我要参赛</a>
        </div>
        <div :class="[index == 2 ? 'on' : '']">
          <a @click="setIndex(2, '/two')" to="/two">作品展示</a>
        </div>
        </div>
      </div>
      <div>
          <router-view @setIndex="setIndex"/>
        <!-- <keep-alive>
        </keep-alive> -->
      </div>
      <div class="onebottombg"></div>
    </div>
  </div>
</template>

<script>
import router from './../../router/index';

export default {
  data() {
    return {
      active: 2,
      index: 1
    };
  },
  methods: {
    setIndex(index, path){
      this.index = index;
      router.push({ 'path': path })
      console.log(this.index);
    }
  },
  mounted () {
    console.log(this.$route.path);
    if (this.$route.path == '/' || this.$route.path == '/one'){
      this.index = 1;
    }
    if (this.$route.path == '/two'){
      this.index = 2;
    }
    if (this.$route.path == '/three'){
      this.index = 3;
    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background-color: #b52c19;
}
.index_top_bg{
  width: 100vw;
  cursor: pointer;
  position: relative;
}
.index_top_bg_text{
  position: absolute;
  z-index: 1000;
  width: 53vw;
  top: 4vw;
  right: 4vw;
}
.index_top_text {
    display: inline-block;
    animation: index_top_text 1.5s ease-in-out 0s infinite normal none running;
    margin: 0px 5px;
}
@keyframes index_top_text{
  10% {
    -webkit-transform: translateY(-1.5px) rotate(0.5deg);
    transform: translateY(-1.5px) rotate(0.5deg);
  }
  20% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
  transform: translateY(1.5px) rotate(1.5deg);
  }
  30% {
    -webkit-transform: translateY(-1.5px) rotate(-0.5deg);
    transform: translateY(-1.5px) rotate(-0.5deg);
  }
  40% {
    -webkit-transform: translateY(1.5px) rotate(-1.5deg);
    transform: translateY(1.5px) rotate(-1.5deg);
  }
  50% {
    -webkit-transform: translateY(-1.5px) rotate(-1.5deg);
    transform: translateY(-1.5px) rotate(-1.5deg);
  }
  60% {
    -webkit-transform: translateY(1.5px) rotate(1.5deg);
    transform: translateY(1.5px) rotate(1.5deg);
  }
  70% {
    -webkit-transform: translateY(-2.5px) rotate(-0.5deg);
    transform: translateY(-2.5px) rotate(-0.5deg);
  }
  80% {
    -webkit-transform: translateY(0.5px) rotate(-1.5deg);
    transform: translateY(0.5px) rotate(-1.5deg);
  }
  90% {
    -webkit-transform: translateY(-2.5px) rotate(-1.5deg);
    transform: translateY(-2.5px) rotate(-1.5deg);
  }
}
.index_top_bg1{
  position: relative;
  min-height:150px;
}
.index_top_bg1::after{
  content: " ";
  position: absolute;
  left: -110vw;
  top: 0;
  width: 40vw;
  height: 55.3vw;

  /* background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
  background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); */
  background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));

  /* -webkit-transform: skewx(-25deg);
  -moz-transform: skewx(-25deg);
  -o-transform: skewx(-25deg);
  -ms-transform: skewx(-25deg); */
  transform: skewx(-25deg);
  animation-name: topAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate-reverse;
}
@keyframes topAnimation {
  0%   {left: 110vw;}
  10%  {left: -110vw;}
}
.top_nav{
  margin: 0 4vw;
  margin-bottom:10px;
  padding: 0 2px;
  border-radius: 15px;
  height: 40px;
  background: url("./../../assets/r_nav.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0px 1px;
 
}
.top_nav__inner{
  height:100%;
   display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-between;
  align-items: center;
}
.top_nav__inner > .on{
  background-color: #991e08;
  height: 25px;
  border-radius: 12px;
  line-height: 25px;
  text-align: center;
  font-weight: bold;
  width: 30%;
  font-size: 14px;
  color: #f6da91;
}
.top_nav__inner > .on a{
  color: #f6da91;
}
.top_nav__inner > div{
  cursor: pointer;
  height: 22px;
  border-radius: 12px;
  line-height: 22px;
  text-align: center;
  width: 30%;
  font-size: 14px;
  color: #a1240f;
}
.top_nav__inner{
  padding:0 20px;
}

.top_nav__inner > div a{
  color: #a1240f;
  font-weight: bold;
}
.onebottombg{
    background: url("./../../assets/onebottombg.png");
    height: 80px;
    width: 100%;
    background-size: 100% 100%;
    /* background-position: center; */
    margin-top:20px;
}
</style>
